<template>
  <div class="tabCenter">
    <source-search @search="searchAction"></source-search>
    <div style="background-color:#F0F2F5; padding-top: 24px;">
      <card-list :cardListData="houseSourceDataList" :typeStatus="1">
        <template v-slot:cardCont="{ item }">
          <a-card :hoverable="true">
            <!-- <span class="fwzt" v-if="item.fwrzzt==='1'">待审核</span>
            <span class="fwzt" v-else-if="item.fwrzzt==='2'">已审核</span>
            <span class="fwzt" v-else-if="item.fwrzzt==='3'">未通过</span> -->
            <a-card-meta class="content-card">
              <div style="margin-bottom: 24px;font-size:18px;" slot="title">
                <a-icon :component="iconHouseHouse" class="icon-style"/>{{ item.fh }}</div>
              <div class="meta-content color3" slot="description">
                <a-icon :component="iconHouseAd" class="icon-style" style="position:absolute;z-index:1;top:4px;"/>
                <div class="adderss" style="padding-left:23px;">{{ item.fwdz }}</div>
              </div>
            </a-card-meta>
          </a-card>
        </template>
      </card-list>
      <div class="example" v-if="houseLoading">
        <a-spin class="loadingcenter" />
      </div>
    </div>
  </div>
</template>
<script>
import SourceSearch from './SourceSearch'
import CardList from '../modules/CardList'
import { iconHouseAd, iconHouseHouse } from '@/core/icons'
import { mapActions, mapGetters, mapMutations } from 'vuex'

export default {
  name: 'SourceContent',
  components: {
    SourceSearch,
    CardList
  },
  data () {
    return {
      iconHouseHouse, // 图标
      iconHouseAd // 图标
    }
  },
  computed: {
    ...mapGetters([
      'houseSourceDataList',
      'houseParams',
      'houseLoading',
      'userInfo',
      'STORE_ID',
      'OPERATOR_TYPE'
    ])
  },
  created () {
    // 初始化vuex状态
    this.setHouseParams({ fh: '' })
    this.searchAjax()
  },
  methods: {
    ...mapActions([
      'getHouseSourceList'
    ]),
    ...mapMutations([
      'setHouseParams'
    ]),
    // 搜素请求函数
    searchAjax () {
      // this.houseParams.hoperatorId = this.userInfo.id
      const params = {}
      params.storesId = this.STORE_ID
      params.jylx = this.OPERATOR_TYPE
      this.setHouseParams(params)
      this.getHouseSourceList(this.houseParams).then(res => {}).catch(() => {
        console.log('request.js统一处理错误')
      })
    },
    // 点击搜素按钮
    searchAction () {
      this.searchAjax()
    }
  }
}
</script>
<style lang="less" scoped>
.tabCenter{margin-left: 200px;background-color:#fff;
  /deep/.caritem {
    width:240px;
    padding:0 4px !important;
    .content-card{
      .meta-content {
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 14px;
        height: 42px;
      }
      .color3{color:#333}
      .icon-style{font-size: 14px;vertical-align: 1px;margin-right: 7px;}
    }
    .ant-card-bordered {
      border:none;
      border-radius: 5px;
      height: 136px;
      box-shadow:0px 6px 10px 0px rgba(220,220,220,1);
      cursor: default;
    }
    .ant-card-bordered:hover{
      border:none;
      border-radius: 5px;
      height: 136px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
    }
    .fwzt{width:52px;height:26px;background-color:#F6AE35;position:absolute;right:0;top:17px;border-top-left-radius: 20px;border-bottom-left-radius: 20px;text-align: center;color:#fff;font-size: 12px;line-height: 26px;}
    .ant-list-item{margin-bottom: 8px;}
    }
    /deep/.ant-row{margin-left:-6px !important;margin-right:-6px !important;}
}

</style>
